
// pages/result/result.vue - 结果页面
<template>
  <view class="container">
    <view class="result-card">
      <view class="result-header">
        <text class="result-title">你的MBTI类型是</text>
        <text class="result-type">{{result.type}}</text>
        <text class="result-nickname">{{typeInfo.nickname}}</text>
      </view>
      
      <view class="type-description">
        <text class="desc-text">{{typeInfo.description}}</text>
      </view>
      
      <view class="dimensions">
        <view class="dimension-item" v-for="(dim, index) in dimensions" :key="index">
          <view class="dim-labels">
            <text class="dim-label">{{dim.left}}</text>
            <text class="dim-label">{{dim.right}}</text>
          </view>
          <view class="dim-bar">
            <view class="dim-progress" :style="{width: dim.percentage + '%', left: dim.isRight ? 'auto' : 0, right: dim.isRight ? 0 : 'auto'}"></view>
          </view>
          <text class="dim-percentage">{{dim.percentage}}%</text>
        </view>
      </view>
    </view>
    
    <view class="traits-section">
      <text class="section-title">性格特点</text>
      <view class="traits-grid">
        <view class="trait-item" v-for="(trait, index) in typeInfo.traits" :key="index">
          <text class="trait-text">{{trait}}</text>
        </view>
      </view>
    </view>
    
    <view class="buttons">
      <button class="share-btn" @click="shareResult">分享结果</button>
      <button class="restart-btn" @click="restartTest">重新测试</button>
    </view>
  </view>
</template>

<script>
import mbtiData from '@/data/mbti-types.js';

export default {
  data() {
    return {
      result: null,
      typeInfo: {}
    };
  },
  computed: {
    dimensions() {
      const dims = [
        {
          left: '内向 (I)',
          right: '外向 (E)',
          code: 'EI',
          isRight: this.result.dimensions.EI === 'E',
          percentage: this.result.dimensions.EI === 'E' ? this.result.percentages.EI : 100 - this.result.percentages.EI
        },
        {
          left: '实感 (S)',
          right: '直觉 (N)',
          code: 'SN',
          isRight: this.result.dimensions.SN === 'N',
          percentage: this.result.dimensions.SN === 'N' ? this.result.percentages.SN : 100 - this.result.percentages.SN
        },
        {
          left: '思考 (T)',
          right: '情感 (F)',
          code: 'TF',
          isRight: this.result.dimensions.TF === 'F',
          percentage: this.result.dimensions.TF === 'F' ? this.result.percentages.TF : 100 - this.result.percentages.TF
        },
        {
          left: '判断 (J)',
          right: '认知 (P)',
          code: 'JP',
          isRight: this.result.dimensions.JP === 'P',
          percentage: this.result.dimensions.JP === 'P' ? this.result.percentages.JP : 100 - this.result.percentages.JP
        }
      ];
      return dims;
    }
  },
  onLoad() {
    const result = uni.getStorageSync('mbtiResult');
    if (!result) {
      uni.redirectTo({
        url: '/pages/index/index'
      });
      return;
    }
    
    this.result = result;
    this.typeInfo = mbtiData[this.result.type] || {
      nickname: '未知类型',
      description: '无法获取此类型的描述信息。',
      traits: []
    };
  },
  methods: {
    shareResult() {
      // 创建要分享的图像
      const ctx = uni.createCanvasContext('shareCanvas');
      
      // 绘制分享图像
      // 绘制代码略...
      
      // 保存图片并分享
      uni.canvasToTempFilePath({
        canvasId: 'shareCanvas',
        success: function(res) {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function() {
              uni.showToast({
                title: '已保存到相册',
                icon: 'success'
              });
            }
          });
        }
      });
    },
    restartTest() {
      uni.showModal({
        title: '确认重新测试',
        content: '你确定要重新开始测试吗？当前结果将被清除。',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('mbtiResult');
            uni.reLaunch({
              url: '/pages/index/index'
            });
          }
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 30rpx;
}
.result-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
  margin-bottom: 40rpx;
}
.result-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}
.result-title {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.result-type {
  font-size: 72rpx;
  font-weight: bold;
  color: #4a6bff;
  margin-bottom: 10rpx;
}
.result-nickname {
  font-size: 36rpx;
  color: #444;
}
.type-description {
  padding: 30rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  margin-bottom: 40rpx;
}
.desc-text {
  font-size: 28rpx;
  color: #555;
  line-height: 1.6;
}
.dimensions {
  padding: 20rpx 0;
}
.dimension-item {
  margin-bottom: 30rpx;
}
.dim-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}
.dim-label {
  font-size: 24rpx;
  color: #666;
}
.dim-bar {
  height: 16rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  position: relative;
  overflow: hidden;
  margin-bottom: 6rpx;
}
.dim-progress {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #4a6bff;
  border-radius: 8rpx;
}
.dim-percentage {
  font-size: 24rpx;
  color: #999;
  text-align: right;
}
.traits-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
  margin-bottom: 40rpx;
}
.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}
.traits-grid {
  display: flex;
  flex-wrap: wrap;
}
.trait-item {
  width: 50%;
  padding: 20rpx 20rpx 20rpx 0;
}
.trait-text {
  font-size: 28rpx;
  color: #555;
  line-height: 1.4;
}
.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
.share-btn, .restart-btn {
  width: 48%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
}
.share-btn {
  background-color: #4a6bff;
  color: white;
}
.restart-btn {
  background-color: #f0f0f0;
  color: #666;
}
</style>
